<style scoped>

</style>

<template>
    <div>
        <div>three测试</div>
        <iframe src="https://buff.163.com/market/csgo_inspect/3d?assetid=23928098981" frameborder="0"></iframe>
        <!-- <div ref="threecontainer"></div> -->
    </div>
</template>

<script>
import * as THREE from 'three'
export default {
    name: 'thre',
    data() {
        return {

        }
    },
    methods: {
        initThree() {
            var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			this.$refs.threecontainer.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};
			animate();
        }
    },
    mounted() {
        console.log(THREE)
        this.initThree()
    }
}
</script>